<template>
  <el-dialog :title="option.title" :visible.sync="option.isShow" width="80%" :close-on-click-modal="false"
    @open="openDialog" @close="closeDialog">
    <el-row :gutter="10">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="left" label-width="100px"
        class="scoreStyle">
        <el-col :span="8">
          <el-form-item prop="CALLTYPE" label="呼叫类型">
            <el-input size="mini" v-model="ruleForm.CALLTYPE" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="AREA" label="运营地区">
            <el-input size="mini" v-model="ruleForm.AREA" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="SCORETEMID" label="评分模板">
            <el-input size="mini" v-model="ruleForm.SCORETEMID" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="BATCHNO" label="批次号">
            <el-input size="mini" v-model="ruleForm.BATCHNO" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="BATCHDATE" label="批次日期">
            <el-input size="mini" v-model="ruleForm.BATCHDATE" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="TASKID" label="任务ID">
            <el-input size="mini" v-model="ruleForm.TASKID" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="BEGINTIME" label="会话开始时间">
            <el-input size="mini" v-model="ruleForm.BEGINTIME" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="BEGINTIME" label="会话结束时间">
            <el-input size="mini" v-model="ruleForm.BEGINTIME" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="SESSIONTIME" label="会话时长">
            <el-input size="mini" v-model="ruleForm.SESSIONTIME" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="AGENTID" label="坐席工号">
            <el-input size="mini" v-model="ruleForm.AGENTID" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="AGENTNAME" label="坐席姓名">
            <el-input size="mini" v-model="ruleForm.AGENTNAME" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="AGENTLEVEL" label="坐席等级">
            <el-input size="mini" v-model="ruleForm.AGENTLEVEL" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="EXTNO" label="分机号">
            <el-input size="mini" v-model="ruleForm.EXTNO" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="TEAM" label="班组">
            <el-input size="mini" v-model="ruleForm.TEAM" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="SKILL" label="技能">
            <el-input size="mini" v-model="ruleForm.SKILL" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="BRNO" label="机构">
            <el-input size="mini" v-model="ruleForm.BRNO" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="COLLECTFLAG" label="采集方式">
            <el-input size="mini" v-model="ruleForm.COLLECTFLAG" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="SAMPLFLAG" label="抽样方式">
            <el-input size="mini" v-model="ruleForm.SAMPLFLAG" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="SAMPLER" label="抽样人员">
            <el-input size="mini" v-model="ruleForm.SAMPLER" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="QUALITER" label="质检员">
            <el-input size="mini" v-model="ruleForm.QUALITER" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="CHANNELTYPE" label="渠道">
            <el-input size="mini" v-model="ruleForm.CHANNELTYPE" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="BUSINESSTYPE" label="业务类型">
            <el-input size="mini" v-model="ruleForm.BUSINESSTYPE" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="MEDIATYPE" label="多媒体类型">
            <el-input size="mini" v-model="ruleForm.MEDIATYPE" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="CUSTOMER" label="客户姓名">
            <el-input size="mini" v-model="ruleForm.CUSTOMER" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="CUSTOMLEVEL" label="客户等级">
            <el-input size="mini" v-model="ruleForm.CUSTOMLEVEL" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="TELNUMBER" label="客户手机号">
            <el-input size="mini" v-model="ruleForm.TELNUMBER" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="CUSTOMIDTYPE" label="客户证件类型">
            <el-input size="mini" v-model="ruleForm.CUSTOMIDTYPE" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="CUSTOMIDNO" label="客户证件号">
            <el-input size="mini" v-model="ruleForm.CUSTOMIDNO" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <p>
            评分详细
          </p>
        </el-col>
        <el-col :span="24">
          <el-table :data="tableData" border width="80%" style="margin-bottom:30px;" :span-method="objectSpanMethod">
            <el-table-column prop="BSCOREITEMNO" align="center" label="评分大项编号" width="110"></el-table-column>
            <el-table-column prop="BSCOREITEMNAME" align="center" label="评分大项名称" width="110"></el-table-column>
            <!-- <el-table-column prop="BSCOREITEMWEIGHT" v-if="option.flag != 'detail'" align="center" label="大项权重">
            </el-table-column> -->
            <el-table-column prop="SSCOREITEMID" align="center" label="评分子项编号" width="120"></el-table-column>
            <el-table-column prop="SSCOREITEMNAME" align="center" label="评分子项"></el-table-column>
            <el-table-column prop="SCORE" align="center" label="得分" >
              <template slot-scope="scope">
                <div>
                  <!-- <el-input v-if="scope.row.SPECIALATTRIBUTE == ''" v-model="scope.row.SCORE" size="mini"></el-input> -->
                  <el-input v-model="scope.row.SCORE" size="mini"></el-input>
                  <!-- <div v-if="scope.row.SPECIALATTRIBUTE == '2'">
                    <el-checkbox-group v-model="scope.row.SCORE">
                      <el-checkbox label="1">复选1</el-checkbox>
                      <el-checkbox label="2">复选2</el-checkbox>
                      <el-checkbox label="3" style="margin:none;">复选3</el-checkbox>
                    </el-checkbox-group>
                  </div> -->
                </div>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="SSCOREITEMWEIGHT" align="center" v-if="option.flag != 'detail'" label="小项权重">
            </el-table-column> -->
            <el-table-column prop="SCOREMINORTERMTYPE" label="小项类型" align="center" :formatter="dataFormat"></el-table-column>
            <el-table-column prop="SPECIALATTRIBUTE" label="评分子项属性" width="100" align="center" :formatter="dataFormat">
            </el-table-column>
            <!-- <el-table-column prop="SUBSIDIARYFIELD" label="特殊项附属字段" width="120" align="center"></el-table-column>
            <el-table-column prop="SUBSIDIARYFIELDFS" label="特殊项分数" width="110" align="center"></el-table-column>
            <el-table-column prop="EXTRASCORE" label="额外分值" align="center"></el-table-column> -->
          </el-table>
        </el-col>
        
      </el-form>
    </el-row>
  </el-dialog>
</template>

<script>
  import request from "@/common/utils/requestQC";
  import getGlobalParams from "@/common/utils/getGlobalParams";
  // import scoreDictionarySmallQuery from '@/message/QCManage/scoreTemplate/scoreDictionarySmall/scoreDictionarySmallQuery';
  // import scoreDictionaryBigQuery from '@/message/QCManage/scoreTemplate/scoreDictionaryBig/scoreDictionaryBigQuery';
  import score from "@/message/QCManage/QCScore/taskScore";

  export default {
    props: {
      option: Object
    },
    computed: {
      isShow: {
        get: function () {
          return this.option.isShow;
        },
        set: function (newValue) {
          this.option.isShow = newValue;
        }
      }
    },
    mounted() {},
    data() {
      return {
        "special": {
          '': '评分',
          '1': '判断',
          '2': '多选',
        },
        typeOption: {
          1: '标准项',
          // 2: '加分项',
          3: '致命项',
        },
        tableData: [],
        spanArr: [],
        props: {
          multiple: true,
        },
        ruleForm: {
          TASKID: '',
          SCORETEMID: ''
        },
        rules: {

        },
        loading: false,
      };
    },
    created() {

    },
    methods: {
      //表格单元格合并
      objectSpanMethod({
        row,
        column,
        rowIndex,
        columnIndex
      }) {
        if (columnIndex === 0 || columnIndex === 1 ) {
          if (this.spanArr[rowIndex] && columnIndex != 2) {
            return {
              rowspan: this.spanArr[rowIndex],
              colspan: 1
            }
          } else {
            return {
              rowspan: 0,
              colspan: 0
            }
          }
        }
      },
      dataFormat(row, column) {
        //枚举设备形式
        if (column.property == "SPECIALATTRIBUTE")
          return this.special[row[column.property]];
        if (column.property == "SCOREMINORTERMTYPE")
          return this.typeOption[row[column.property]];
      },

      openDialog() {
        this.tableData = []
        this.spanArr = []
        let res = JSON.parse(JSON.stringify(this.option.response))
        let row = JSON.parse(JSON.stringify(this.option.row))
        this.ruleForm = JSON.parse(JSON.stringify(this.option.row))
        this.ruleForm.SCORETEMID = res.SCORETEMID
          let arr = []
          let data = []
          res.DTL1.forEach(item => {
            item.DTL2.forEach(el => {
              data.push({
                BSCOREITEMNO: item.BSCOREITEMNO,
                BSCOREITEMNAME: item.BSCOREITEMNAME,
                BSCOREITEMWEIGHT: item.BSCOREITEMWEIGHT,
                SSCOREITEMID: el.SSCOREITEMID,
                SSCOREITEMNAME: el.SSCOREITEMNAME,
                SCORE: el.SCORE,
                // SCORE: el.SPECIALATTRIBUTE == '2'?[]:'',
                SSCOREITEMWEIGHT: el.SSCOREITEMWEIGHT,
                SPECIALATTRIBUTE: el.SPECIALATTRIBUTE,
                SUBSIDIARYFIELD: el.SUBSIDIARYFIELD,
                SUBSIDIARYFIELDFS: el.SUBSIDIARYFIELDFS,
                EXTRASCORE: el.EXTRASCORE,
              })
            })
          })
          this.tableData = data;
          console.log("评分数据==="+JSON.stringify(this.tableData))
          this.spanArr = [];
          let contactDot = 0;
          this.tableData.forEach((info, index) => {
            if (index - 1 >= 0 && info.BSCOREITEMNO === this.tableData[index - 1].BSCOREITEMNO) {
              this.spanArr[contactDot] += 1;
            //   console.log(this.spanArr[contactDot])
              this.spanArr.push(0)
            } else {
              contactDot = index
              this.spanArr.push(1)
              // console.log(this.spanArr)
            }
          });
        
      },
      
      closeDialog() {
        if (this.$refs['ruleForm'] != undefined) {
          this.$refs['ruleForm'].clearValidate();
        }
      },
    }
  };

</script>
<style lang="scss">
.scoreStyle{
  .el-form-item {
    margin-bottom: 15px;
}
}  
</style>
<style scoped>

</style>
